<template>
  <div class="Subjects">
    <div class="selectContainer">
        选择学科：
        <select  @change="selectChange">
          <option value="0">全部</option>
          <option :value="item.id" v-for="item,index in dept" :key="index">{{item.name}}</option>
        </select>
    </div>
    <table>
      <thead>
        <tr>
          <th>课程ID</th>
          <th>学科名</th>
          <th>课程名</th>
          <th>课时长度</th>
          <th> <input type="checkbox" v-model="checkAll"> 全选/全不选</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in subjects" :key="index" v-show="selectType==0 || selectType==item.type">
          <td>{{item.id}}</td>
          <td>{{ deptObj[item.type] }}</td>
          <td>{{item.name}}</td>
          <td>{{item.lessons}}</td>
          <td><input type="checkbox" v-model="checkList[index]"> --  {{checkList[index]}}</td>
        </tr>
        <tr>
          <td colspan="5"> <button @click="add">添加到我的课程</button> <button @click="cancel">取消选择</button> </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
  import { mapState,mapMutations } from 'vuex'
  export default {
    name: 'Home',
    components: {

    },
    data() {
      return {
        deptObj:{},   // 学科名关系对应对象
        checkList:[],
        selectType: 0  //选中项
      }
    },
    computed:{
      ...mapState({
        dept: state => state.subjects.dept,
        subjects: state => state.subjects.subjects
      }),
      // 全选/全不选
      checkAll:{
        set(newVal){
          this.checkList = this.checkList.map(item => newVal)
        },
        get(){

          return !this.checkList.includes(false) //只要checkList没有false就是全选
        }
      }
    },
    created() {
      // 创建学科名关系对应对象
      let deptObj = {}
      this.dept.forEach(item => {
         deptObj[item.id] = item.name
      })
      this.deptObj = deptObj

      this.checkList = this.subjects.map(item => false) //创建选择框数组，用于全选功能
    },
    methods: {
      ...mapMutations({
        addSubjects:'user/addSubjects'
      }),
      // 选中下拉框某个选项
      selectChange(e){
        this.selectType =  e.target.value
      },
      // 添加到我的课程
      add(){
        // 没有任何选择需要提示
        if(this.checkList.filter(item => item).length==0){
          alert('请选择课程在进行添加')
          return
        }

        let addArr = []
        this.checkList.forEach((item,index)=>{
          if(item){
            addArr.push(this.subjects[index])
          }
        })

        this.addSubjects(addArr)

        alert('已成功添加 '+ addArr.map(item => item.name).join('、') + ' 课程')
      },
      // 取消
      cancel(){
        this.checkList = this.checkList.map(item => false)
      }
    },
  }
</script>

<style lang="less">
  .Subjects {
    margin: 0 auto;
    width: 1000px;
    text-align: center;
  }

  .selectContainer{
    text-align: left;
    margin-bottom: 10px;
  }

  table {
    width: 100%;
    border: 1px solid black;
    border-collapse: collapse;
    color: #666;
    font-size: 14px;
  }

  table th {
    width: 100px;
    border: 1px solid black;
  }

  table tr {
    height: 70px;
  }

  table td {
    padding-left: 10px;
    border: 1px solid black;
  }

  button {
    height: 30px;
    padding: 5px;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    border: none;
    background-color: #87CEEB;
    cursor: pointer;
  }
</style>